import { useDark, useToggle } from '@vueuse/core'

export const isDark = useDark({
  selector: 'html',
  attribute: 'class',
  valueDark: 'dark',
  valueLight: 'light',
})

export const toggleDark = useToggle(isDark)

export const setTheme = (theme) => {
  const html = document.documentElement
  if (theme === 'auto') {
    html.removeAttribute('class')
    isDark.value = window.matchMedia('(prefers-color-scheme: dark)').matches
  } else if (theme === 'dark') {
    isDark.value = true
  } else {
    isDark.value = false
  }
}
